<template>
	<uni-drawer ref="dialogRef" mode="right" :mask-click="false" :width="350">
		<view class="p-2">
			<view class="flex justify-between">
				<view>
					<uni-title type="h3" :title="`订单信息 ${activeDrawInfo.lotteryDrawNum}`"></uni-title>
				</view>
				<view>
					<button size="mini" @click="closeDrawer()">X</button>
				</view>
			</view>
			<uni-title class="ms-4" type="h1" title="抱歉，订单不存在！" color="oklch(70.4% 0.191 22.216)"
				v-if="!apiStatus"></uni-title>
			<scroll-view style="height:calc(100vh - 80px);" scroll-y="true">
				<view class="p-4 text-base">
					<view class="mb-2 font-medium">全部总共 {{allParams.length}} 个方案。</view>
					<view class="flex items-center">
						<view class="me-4">本期：{{activeDrawInfo.lotteryDrawNum}}</view>
						<view>{{activeDrawInfo.lotteryDrawResult}}</view>
					</view>
					<view class="flex items-center my-1">
						<view class="me-4">上期：{{prevDrawInfo.lotteryDrawNum}}</view>
						<view>{{prevDrawInfo.lotteryDrawResult}}</view>
					</view>
					<uni-title type="h3" title="统计汇总"></uni-title>
					<view class="lh-lg">
						<view>
							总数量：{{statInfo.totalTicketCount}}注（100%）（{{statInfo.totalBatchCount}}个 x
							{{statInfo.batchTicketCount}}
							注）
						</view>
						<view>
							总收入：{{statInfo.totalIncome}}元 / 总支出：{{statInfo.totalExpenses}}元 /
							<text
								:class="statInfo.netProfitMoney > 0 ? 'text-red-400' : 'text-green-600'">净利润：{{statInfo.netProfitMoney}}元</text>
						</view>
						<view>
							有中奖方案量：{{statInfo.winBatchCount}}个（{{statInfo.winBatchCountRate}}%） /
							无中奖方案量：{{statInfo.noWinBatchCount}}个（{{statInfo.noWinBatchCountRate}}%）
						</view>
						<view>
							盈利方案量：{{statInfo.profitBatchCount}}个（{{statInfo.profitBatchCountRate}}%） /
							亏损方案量：{{statInfo.lossBatchCount}}个（{{statInfo.lossBatchCountRate}}%)
						</view>
						<view>
							最高奖项：
							<text :class="statInfo.maxPrize.value > 0 ? 'text-red-400' : ''">
								{{statInfo.maxPrize.text}}，结果：{{statInfo.maxPrize.front+' + '+statInfo.maxPrize.back}}，奖金：{{statInfo.maxPrize.moneyText}}
							</text>
						</view>
						<uni-title type="h3" title="方案汇总"></uni-title>
						<view v-for="(item, idx) of batchList" :key="idx" class="text-base">
							<uni-title type="h4" :title="`#${idx+1} ${item.title}`"></uni-title>
							<view>
								总收入：{{item.totalIncome}}元 / 总支出：{{item.totalExpenses}}元
								/ <text
									:class="item.netProfitMoney > 0 ? 'text-red-400' : 'text-green-600'">净利润：{{item.netProfitMoney}}元</text>
							</view>
							<view>
								最高奖项：<text
									:class="item.maxPrize.value > 0 ? 'text-red-400' : ''">{{item.maxPrize.text}}，结果：{{item.maxPrize.front+' + '+item.maxPrize.back}}，奖金：{{item.maxPrize.moneyText}}</text>
							</view>
						</view>
						<uni-title type="h3" title="奖项汇总"></uni-title>
						<view v-for="i in 2" :key="i">
							{{statInfo['prize'+i].title}}：{{statInfo['prize'+i].totalTicketCount}}注（{{`${statInfo['prize'+i].prizeMoney}万*${statInfo['prize'+i].totalTicketCount}=${statInfo['prize'+i].totalIncome}万元`}}）
						</view>
						<template v-for="i in 9">
							<view v-if="i>2" :key="i" :class="statInfo['prize'+i].totalIncome>0 ? 'text-red-400' : ''">
								{{statInfo['prize'+i].title}}：{{statInfo['prize'+i].totalTicketCount}}注（{{`${statInfo['prize'+i].prizeMoney}*${statInfo['prize'+i].totalTicketCount}=${statInfo['prize'+i].totalIncome}元`}}）
							</view>
						</template>
					</view>
					<uni-title type="h3" title="奖项详情（按奖项高低排序）"></uni-title>
					<view class="lh-lg" v-for="i in 9" :key="i">
						<view :class="'text-base my-2 ' + (statInfo['prize'+i].totalIncome>0 ? 'text-red-400' : '')">
							{{statInfo['prize'+i].title}}（{{statInfo['prize'+i].totalBatchCount}}个，{{statInfo['prize'+i].totalTicketCount}}注）
						</view>
						<view v-for="(item2, idx2) in statInfo['prize'+i].list" :key="idx2">
							<view>
								第 {{item2.id}}
								批
								<text
									:class="item2.netProfitMoney > 0 ? 'text-red-400' : 'text-green-600'">（{{(item2.netProfitMoney > 0 ? '盈利' : '亏损') + Math.abs(item2.netProfitMoney) + '元'}}）</text>
							</view>
							<view>方案：{{item2.title}}</view>
							<view class="flex items-center lh-lg" v-for="(item3, idx3) in item2.drawList" :key="idx3">
								<view v-html="item3.text"></view>
								<view class="text-error mx-6">{{`${item3.frontCount}+${item3.backCount}`}}</view>
								<view class="text-error">{{`${item3.statusText}(${item3.moneyText})`}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="flex justify-between">
				<view></view>
				<view><button size="mini" @click="closeDrawer()">关闭</button></view>
			</view>
		</view>
	</uni-drawer>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	import {
		prize_info
	} from '@/config/dlt-config';
	import DltApi from '@/model/DltApi';
	import DltTplModel from '@/model/DltTplModel';

	const dltTplModel = new DltTplModel();
	const dltApi = new DltApi();

	const dialogRef = ref(null);
	const visible = defineModel();
	const props = defineProps({
		id: String
	});

	const prevDrawInfo = ref({
		lotteryDrawNum: '',
		lotteryDrawResult: ''
	});

	const activeDrawInfo = ref({
		lotteryDrawNum: props.id,
		lotteryDrawResult: '',
		lotteryDrawTime: '',
	});

	const statInfo = ref({
		...dltTplModel.getTplForStatInfo()
	});

	const allParams = dltTplModel.getAllTplParams();

	const batchList = ref([]);

	const apiStatus = ref(false);

	watch(() => visible.value, () => {
		if (visible.value) {
			dialogRef.value.open();
		} else {
			dialogRef.value.close();
		}
	})

	watch(() => props.id, val => {
		apiStatus.value = false;
		dialogRef.value.open();
		console.log('watch', props.id, val)
		dltApi.getOrderDetail(props.id).then(data => {
			console.log('data', data)
			if (!data || !data.DrawalInfo) {
				return;
			}
			apiStatus.value = true;
			activeDrawInfo.value = data.DrawalInfo;
			prevDrawInfo.value = data.PrevDrawalInfo;
			statInfo.value = data.StatInfo;
			batchList.value = data.OrderList;
		}).catch(err => {
			console.log('err', err)
			uni.showToast({
				title: err.message
			})
		})
	})

	const closeDrawer = () => {
		visible.value = false;
		dialogRef.value.close();
	}
</script>